<template>
	<view v-if="show">
		<uni-popup ref="sealInfoRef" @maskClick="closePopup()">
			<view class="popup-bd">
				<view class="popup-title mt20">
					配置印章信息
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<view class="popup-content">
					<view
						class="p10 border-d border-r-10 mb20"
						v-for="(sealItem, sealIndex) in _value"
						:key="sealIndex"
					>
						<uni-forms
							ref="postForm"
							:modelValue="sealItem"
							:rules="rules"
							label-position="top"
						>
							<uni-forms-item
								label="选择印章"
								label-width="100%"
								required="true"
							>
								<view
									style="color: #b2b2b2"
									class="f28 flex-between pt10"
									@tap="openSealPopup(sealIndex)"
								>
									<view class="tr text-over">
										<view>
											<view
												class="g3 f28"
												v-if="sealItem.seal.sealName"
												>{{
													sealItem.seal.sealName
												}}</view
											>
											<view v-else>请选择印章</view>
										</view>
									</view>
									<uni-icons
										type="forward"
										size="40rpx"
										color="#C5C8CB"
									></uni-icons>
								</view>
							</uni-forms-item>
							<uni-forms-item
								label="印章页码"
								label-width="100%"
								required="true"
							>
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									ref="form"
									class="uni-mt-5"
									trim="all"
									v-model="sealItem.pageNo"
									type="number"
									placeholder="请输入"
								></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item
								label="添加关键词"
								label-width="100%"
								required="true"
							>
								<uni-easyinput
									:placeholderStyle="placeholderStyle"
									ref="form"
									class="uni-mt-5"
									trim="all"
									v-model="sealItem.keywords"
									placeholder="请输入"
								></uni-easyinput>
							</uni-forms-item>
						</uni-forms>
						<button
							v-if="_value && _value.length > 1"
							class="delete-button small-size"
							@tap="deleteItem(sealIndex)"
						>
							删除
						</button>
					</view>
					<button
						class="primary-button plain small-size mt10"
						@tap="addColumn()"
					>
						+ 添加数据
					</button>
				</view>
				<view class="popup-bottom df ac"
					><button class="primary-button w90" @tap="submitChoose()">
						确定
					</button></view
				>
			</view>
		</uni-popup>
		<diy-selectList
			:show="isShowSeal"
			title="选择印章"
			type="block"
			:show-search="false"
			:local-data="columnsCulture"
			@close="closeSealPopup()"
			@submit="chooseSeal"
		/>
	</view>
</template>
<script>
import { getSealOption } from '@/subPackagesIndex/pages/index/approval/launch/apis/design.js'
export default {
	props: {
		show: {
			type: Boolean,
			value: false,
			default: false,
		},
		value: {
			type: Object,
			value: null,
			default: null,
		},
	},
	computed: {
		_value: {
			get() {
				return this.value.sealInfo
			},
			set() {},
		},
	},
	data() {
		return {
			isShowSeal: false,
			columnsCulture: [],
			sealIndex: 0,
		}
	},
	methods: {
		deleteItem(i) {
			this._value.splice(i, 1)
		},
		addColumn() {
			this._value.push({
				seal: {},
				pageNo: 1,
				keywords: '',
			})
		},
		chooseSeal($event) {
			this._value[this.sealIndex].seal = $event
			this.closeSealPopup()
		},
		closeSealPopup() {
			this.isShowSeal = false
		},
		openSealPopup(index) {
			this.sealIndex = index
			this.isShowSeal = true
		},
		getSealOptions() {
			getSealOption({ orgId: uni.getStorageSync('orgId') }).then(
				(res) => {
					if (res.data && res.data.length > 0) {
						this.columnsCulture = res.data.map((i) => {
							return {
								...i,
								label: i.sealName,
								value: i.sealId,
							}
						})
					}
				}
			)
		},
		submitChoose() {
			let warning = ''
			this._value.forEach((item) => {
				console.log(item)
				if (!item.seal.sealName) {
					uni.showToast({
						title: '请选择印章~',
						icon: 'error',
					})
					warning = 1
					return
				}
				if (!item.pageNo) {
					uni.showToast({
						title: '请输入印章页码~',
						icon: 'error',
					})
					warning = 1
					return
				}
				if (!item.keywords) {
					uni.showToast({
						title: '请输入关键词~',
						icon: 'error',
					})
					warning = 1
					return
				}
			})
			if (warning) {
				return
			}
			this.$emit('submit', this._value)
			this.closePopup()
		},
		openPopup() {
			this.getSealOptions()
			this.$refs.sealInfoRef.open('bottom')
		},
		closePopup() {
			this.$refs.sealInfoRef.close()
			this.$emit('close')
		},
	},
	watch: {
		show(val) {
			if (val) {
				this.openPopup()
			} else {
				this.closePopup()
			}
		},
	},
}
</script>
<style scoped lang="scss">
.picker-view {
	text-align: center;
}
.item {
	line-height: 100rpx;
	text-align: center;
}
.popup-bd {
	overflow-y: auto;
}
.popup-content {
	overflow-y: scroll;
}
</style>
